Trò chơi trí óc trong JavaScript
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>True Color | BrainStorm</title>
6 <link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
7 <link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
8 <link rel="stylesheet" href="game-css.css" type="text/css">
9 <link rel="stylesheet" href="../Alert/alertcss.css">
10 <script src="games-js.js" type="text/javascript"></script>
11 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.js"></script>
12 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.js"></script>
13
14 <script type="text/javascript">
15 var i = 1;
16 var count = 0;
17 var randomNum = 0;
18 var img_value = [0, 1, 0, 0, 0, 1, 1, 0, 1, 0, 1, 0, 1, 0, 1, 0, 0, 0, 1, 1]; //Answer array
19
20 //Answer checking and new image generation function. Here the argument is 0 for NO or 1 for YES.
21 function checker(check) {
22 //max 20 question image will be display. i.e i<=20
23 if (i <= 20) {
24 if (check === img_value[randomNum]) { //verifying the answer with array.
25
26 //score counting.
27 if (count > 750){count = count + 150;}
28 else if (count > 350 && count < 750){count = count + 100;}
29 else {count = count + 50;}
30
31 //If answer is correct the green tick mark will be blinked.
32 document.getElementById('flip-img').classList.add("on");
33 document.getElementById('correct').classList.add("on");
34 setTimeout(function(){
35 document.getElementById('correct').classList.remove("on");
36 document.getElementById('flip-img').classList.remove("on");
37 }, 200);
38 }
39 else {
40 // If answer is wrong the red cross will blink.
41 document.getElementById('flip-img').classList.add("on");
42 document.getElementById('wrong').classList.add("on");
43 setTimeout(function(){
44 document.getElementById('wrong').classList.remove("on");
45 document.getElementById('flip-img').classList.remove("on");
46 }, 200);
47 }
48 i++; //increment the question count.
49
50 randomNum = getRandomInt(1,20); //generation random number for selecting next question.
51
52 //changing the quetion image according to random number generated and changing the score as per the previous answer.
53 if (i <= 20) {
54 document.getElementById('score').innerHTML = "" + count;
55 document.getElementById('score1').innerHTML = "" + count;
56 document.getElementById('scoreDB').value = count;
57 document.getElementById('image').src = "true-color-img/Picture" + (randomNum) + ".png";
58 }
59 randomNum = randomNum - 1; //for array indexing with respect to random question.
60 }
61 //Score card at the end of game.
62 if (i == 21) {
63 document.getElementById('score1').innerHTML = "" + count;
64 document.getElementById('scoreDB').value = count;
65 document.getElementById('main-screen').style.display = "none";
66 document.getElementById('end-screen').classList.add("on");
67
68 //checking for new best score of the game.
69 var score = 0;
70 if (score <= count){
71 document.getElementById('best-score').classList.add("on");
72 }
73 }
74 }
75 //If user leave the game in between then socre is 0.
76 function end_screen() {
77 document.getElementById('score1').innerHTML = "000";
78 }
79 </script>
80
81 <script type="text/javascript">
82 $(document).ready(function(){
83 var lastScore = $.cookie("trueColor");
84 $("#lastScore").text(lastScore);
85
86 var per = $.cookie("mental");
87 $("#per").text(per);
88 });
89 </script>
90
91 </head>
92 <body>
93
94 <div id="start-screen">
95 <div class="row">
96 <div class="col half-wider"><h1>True Color <span class="info">(MENTAL AGILITY)</span></h1></div>
97 <div class="col half-narrow">
98 <a id="ON" class="btn-circle hoverable" onclick="video_on()"><i class="material-icons"></i></a>
99 <a id="OFF" class="btn-circle hoverable off" onclick="video_off()"><i class="material-icons"></i></a>
100 </div>
101 </div>
102
103 <video id="video" width="500" height="415" controls>
104 <source src="true-color-img/Rec.mp4" type="video/mp4">
105 </video>
106
107 <div id="info" class="card">
108 <div class="row">
109 <div class="col half">
110 <span class="material-icons blue-text"></span>
111 <span id="lastScore" class="num">7777</span>
112 <span class="info black-text">LAST SCORE</span>
113 </div>
114 <div class="col half">
115 <span class="material-icons blue-text"></span>
116 <span id="per" class="num">50</span>
117 <span class="info black-text">MENTAL AGILITY</span>
118 </div>
119 </div>
120 <div class="divider"></div>
121
122 <div class="row black-text left-align">
123 <span class="num"> GAME BENEFIT :</span>
124 <ul>
125 <li>Exercises your multitasking and your ability to take a step back & think before act.</li>
126 </ul>
127 </div>
128
129 <div class="row black-text left-align">
130 <span class="num"> Instructions <span class="info black-text">(click on info button for video)</span> :</span>
131 <ol>
132 <li>A word and a color will appear on the cards.</li>
133 <li>Determine if the word at the top matches the color at the bottom.</li>
134 <li>Ignore the meaning of the word at the bottom and focus just on its color.</li>
135 </ol>
136 </div>
137
138 </div>
139
140 <a id="button-start" class="btn start hoverable">PLAY GAME</a>
141 </div>
142
143 <div id="main-screen" class="off">
144 <div class="row">
145 <span class="timer">
146 <a id="button-stop" class="btn pause left material-icons"></a>
147 <a id="button-play" class="btn pause left material-icons off"></a>
148 00:<span id="seconds">59</span>
149 <a id="score" class="btn score right">000</a>
150 </span>
151 </div>
152
153 <div id="wait-screen" class="card waiting">
154 <div class="waring">
155 <span class="waring-i"></span>
156 <span class="waring-dot"></span>
157 </div>
158 <h1 class="black-text">Are you sure to exit?</h1>
159 <span class="num black-text">You will not able to record your score!</span>
160 <div class="row" style="margin-top: 40px">
161 <a id="button-no" class="btn green">No</a>
162 <a class="btn red" onclick="end_screen(); flip_endCard();">Yes</a>
163 </div>
164 </div>
165
166 <div id="flip-img" class="card waiting transparent">
167 <a id="correct" class="btn-circle check green"><i class="material-icons"></i></a>
168 <a id="wrong" class="btn-circle check red"><i class="material-icons"></i></a>
169 </div>
170
171 <img id="image" src="true-color-img/Picture1.png">
172 <br/>
173 <a class="btn red" onclick="checker(0)">NO</a>
174 <a class="btn green" onclick="checker(1)">YES</a>
175
176 </div>
177
178 <div id="end-screen" class="off">
179 <div class="card">
180 <div class="row">
181 <span id="best-score" class="num green-text off">BEST NEW SCORE</span>
182 <span class="material-icons blue-text"></span>
183 <h1 class="black-text" id="score1" style="margin: 0">000</h1>
184 <span class="info black-text">YOUR SCORE</span>
185 <div class="divider"></div>
186
187 <div class="card bg-green">
188 <div class="row left-align">
189 <span class="num white-text">SUCCESS RATE :</span>
190 <ul><span class="info">Your success rate is 72%. Well done!
191 Only 18% of the users at this rank do this well.</span></ul>
192 </div>
193 </div>
194
195 <div class="divider"></div>
196 </div>
197 <div class="row">
198 <form action="../gameScore" method="post">
199 <input name="gameId" type="hidden" value="truecolor">
200 <input name="score" id="scoreDB" type="hidden" value="0">
201 <input class="btn continue hoverable" type="submit" value="Continue"></input>
202 </form>
203 </div>
204 </div>
205 </div>
206
207 </body>
208 </html>
